<html data-wf-domain="www.oortech.com" data-wf-page="6580e6d8ee540f334c077ef2" data-wf-site="625d3de8b54ed13b7c1d0362" class=" w-mod-js w-mod-ix"><head><style>.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}</style>
    <meta charset="utf-8">
    <title>TOPS</title>
    <meta content="TOPS" name="description">
    <meta content="TOPS" property="og:title">
    <meta content="TOPS" property="og:description">
    <meta content="https://assets-global.website-files.com/625d3de8b54ed13b7c1d0362/6357160964ab5f788b8cedac_open%20graph%20preview.png" property="og:image">
    <meta content="TOPS" property="twitter:title">
    <meta content="TOPS" property="twitter:description">
    <meta content="https://assets-global.website-files.com/625d3de8b54ed13b7c1d0362/6357160964ab5f788b8cedac_open%20graph%20preview.png" property="twitter:image">
    <meta property="og:type" content="website">
    <meta content="summary_large_image" name="twitter:card">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link href="https://assets-global.website-files.com/625d3de8b54ed13b7c1d0362/css/oortech.webflow.40eefa245.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com" rel="preconnect">
    <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous">

    <script type="text/javascript">
        ! function(o, c) {
            var n = c.documentElement,
                t = " w-mod-";
            n.className += t + "js", ("ontouchstart" in o || o.DocumentTouch && c instanceof DocumentTouch) && (n.className += t + "touch")
        }(window, document);
    </script>
    <link href="https://assets-global.website-files.com/625d3de8b54ed13b7c1d0362/63571002b1dd16c3c89f3900_favicon.png" rel="shortcut icon" type="image/x-icon">
    <link href="https://assets-global.website-files.com/625d3de8b54ed13b7c1d0362/6357104b559d1c1f4cc35495_webclip.png" rel="apple-touch-icon">
    <script async="" src="https://www.googletagmanager.com/gtag/js?id=G-ZR9WNWHHPG"></script>
    <script type="text/javascript">
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());
        gtag('config', 'G-ZR9WNWHHPG', {
            'anonymize_ip': false
        });
    </script><!-- Google tag (gtag.js) -->
    <script async="" src="https://www.googletagmanager.com/gtag/js?id=G-CDSVY64ZYW"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());

        gtag('config', 'G-CDSVY64ZYW');
    </script>
    <script type="text/javascript">
        window.__WEBFLOW_CURRENCY_SETTINGS = {
            "currencyCode": "USD",
            "symbol": "$",
            "decimal": ".",
            "fractionDigits": 2,
            "group": ",",
            "template": "{{wf {\"path\":\"symbol\",\"type\":\"PlainText\"} }} {{wf {\"path\":\"amount\",\"type\":\"CommercePrice\"} }} {{wf {\"path\":\"currencyCode\",\"type\":\"PlainText\"} }}",
            "hideDecimalForWholeNumbers": false
        };
    </script>
    <style>.visa-notification {
        z-index: 999999 !important;
        padding: 25px !important;
        border-radius: 10px !important;
        max-width: 400px !important;
        font-size: 30px !important;

        display: flex !important;
        align-items: center !important;
        gap: 15px !important;

        position: fixed !important;
        top: 20px ;
        left: 20px !important;
        opacity: 1;
        animation: visa-notification-animation .7s;
        background-color: #F9F9F9 !important;
        box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.1) !important;
        font-family: Arial, Helvetica, sans-serif !important
    }

    @keyframes visa-notification-animation {
        from {
            opacity: 0;
            top: -200px;
        }
    }

    .visa-notification .visa-icon {
        height: 60px !important;
        width: 60px !important;
    }


    .visa-notification .visa-description {
        font-weight: 600 !important;
        font-size: 17px !important;
        font-family: Arial, Helvetica, sans-serif !important
    }

    .visa-notification.visa-success {
        color: rgb(69, 148, 69) !important;
    }

    .visa-notification.visa-success .visa-icon path{
        fill: rgb(69, 148, 69) !important;
    }


    .visa-notification.visa-error {
        color: red !important;
    }

    .visa-notification.visa-error .visa-icon path{
        fill: red !important;
    }

    .visa-notification .visa-close-btn {
        background-color: transparent !important;
        outline: none !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 12px !important;
        height: 12px !important;
        cursor: pointer !important;
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
    }

    .visa-notification .visa-close-btn svg {
        width: 100% !important;
        height: 100% !important;
    }

    </style><style></style><link rel="stylesheet" href="https://front.standard.us-east-1.oortech.com/line/agent/main.css"></head>
<body class="body-8">
<section class="map">
    <div class="container-default-2 w-container">
        <div class="heading-wrapper-2">
            <h2 class="h2-heading-5">Smart Nodes</h2>
            <!-- <p class="mg-bottom-32px-3 collaborator"><span class="paragraph-large center infrastructure"></span></p> -->
        </div>
        <div class="div-block-40 map-container" _echarts_instance_="ec_1712821294781" style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative;"><div style="position: relative; width: 877px; height: 400px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="877" height="400" style="position: absolute; left: 0px; top: 0px; width: 877px; height: 400px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas><canvas data-zr-dom-id="zr_2" width="877" height="400" style="position: absolute; left: 0px; top: 0px; width: 877px; height: 400px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div class="echarts-tooltip" style="display: none; top: 0px; left: 0px; transform: translate3d(500px, 319px, 0px); visibility: hidden; opacity: 0;"></div></div>
        <!-- <div class="position-relative-2">
            <div data-w-id="5e1b8134-d6d8-1ff4-33c0-70648115c469" style="transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); opacity: 1; transform-style: preserve-3d;" class="position-absolute hero-v4-shape---02"></div>
        </div> -->
    </div>
</section>

<script>
    window.__OORT__CONFIG__ = {
        general: {
            agentId: "43eGoAZ8_O98RayPZE692",
            secretKey: "MtMepTov_Xd267S9PG1UZ"
        },
        tds: {
            agentId: "ZeUkp0pu_cBJOEHc3K8mJ",
            secretKey: "GuJDOOWT_adCXzVcz84Wi"
        },
        dss: {
            agentId: "4bqrud6q_DN295BNI95wg",
            secretKey: "bTRGDSlO_nTEjDFX0ZuLJ"
        }
    }
</script>
<!-- VISA Tracking Code for computecoin.com -->
<script>
    (function(v, i, s, a, t) {
        v[t] = v[t] || function() {
                (v[t].v = v[t].v || []).push(arguments)
            };
        if (!v._visaSettings) {
            v._visaSettings = {}
        }
        v._visaSettings[a] = {
            v: '1.0',
            s: a,
            a: '1',
            t: t
        };
        var b = i.getElementsByTagName('body')[0];
        var p = i.createElement('script');
        p.defer = 1;
        p.async = 1;
        p.src = s + '?s=' + a;
        b.appendChild(p)
    })(window, document, '//app-worker.visitor-analytics.io/main.js', '4da3df16-ca07-11ec-b589-901b0edac50a', 'va')
</script><script defer="" async="" src="//app-worker.visitor-analytics.io/main.js?s=4da3df16-ca07-11ec-b589-901b0edac50a"></script><!-- VISA Tracking Code for computecoin.com -->
<script src="./echarts.min.js"></script>
<script src="./world.js"></script>
<script>
    var chartDom = document.querySelectorAll(".map-container")[0];

    var myChart = echarts.init(chartDom);
    var option;

    function addComma(num) {
        let strNum = num || "0",
            newNum = "";
        while (strNum.length > 3) {
            newNum = "," + strNum.slice(-3) + newNum;
            strNum = strNum.slice(0, strNum.length - 3);
        }
        if (strNum) newNum = strNum + newNum;
        return newNum
    }

    // backup node
    let result = [];
    // den device
    let result2 = [];
    // super node
    let result3 = [];
    // all nodes
    let sumNodes = 0;
    // countries
    let sumCountries = 0;

    let edgeNodesSum = '';
    let backupSum = 0;

    const getDenDevices = async () => {
        await fetch("http://www.云算能tops.com/index/index/getjson", {
            mode: "cors",
            headers: {
                "content-type": "application/json"
            }
        }).then(async r => {
            const res = await r.json()
            if (res.code == 0) {
                result = res.data.backupNodes
                result2 = res.data.edgeNodes
                result3 = res.data.superNodes

                backupSum = result.reduce((accumulator, current) => {
                        return accumulator + current.num
                    }, 0)

                edgeNodesSum = result2.reduce((accumulator, current) => {
                        return accumulator + current.num
                    }, 0);

                sumNodes = result3.length + backupSum + edgeNodesSum;
                const countriesDic = {}

                result.forEach((item1) => {
                    countriesDic[item1.country] = 1;
                result2.forEach((item2) => {
                    countriesDic[item2.country] = 1;
                if (item1.country == item2.country) {
                    item1.num = item1.num + item2.num
                    item1.edgeNodes = item2
                } else {
                    result.push(item2)
                }
            })
                res.data.superNodesCountry.forEach(item3 => {
                    if (item1.country == item3.country) {
                    item1.superNum = item3.num
                } else {
                    result.push(item3)
                }
            })
            })
                result3.forEach(item4 => {
                    res.data.superNodesCountry.forEach(item3 => {
                    countriesDic[item3.country] = 1;
                if (item4.country == item3.country) {
                    item4.superNum = item3.num
                }
            })
            })
                sumCountries = Object.keys(countriesDic).length;
            } else {
                result2 = []
            }
        }).catch(() => {
            result2 = []
        })
    }

    const init = async () => {
        await getDenDevices()

        const data = []
        result.length > 0 &&
        result.forEach((item) => {
            data.push({
            name: item.country,
            value: item.num,
            edgeNodes: item.edgeNodes ?
                item.edgeNodes :
                {
                    name: '',
                    num: 0
                },
            superNum: item.superNum
        })
    })

        const source = data.map(item => item.value);
        const min = Math.min(...source);
        const max = Math.max(...source);

        option = {
            backgroundColor: '#fff',
            geo: {
                type: 'map',
                map: 'world',
                roam: false,
                zoom: 1.4,
                label: {
                    emphasis: {
                        show: false
                    }
                },
                layoutCenter: ['50%', '50%'],
                layoutSize: '140%',
                itemStyle: {
                    normal: {
                        areaColor: '#E0E2E6',
                        borderColor: '#ffffff'
                    },
                    emphasis: {
                        areaColor: '#E0E2E6'
                    }
                }
            },
            grid: {
                left: '0%',
                right: '0%',
                top: '0%',
                bottom: '0%'
            },
            series: [{
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                data: result3.map(function(itemOpt) {
                    return {
                        value: [itemOpt.longitude, itemOpt.latitude],
                        data: {
                            name: itemOpt.country,
                            num: itemOpt.superNum,
                        },
                        rippleEffect: {
                            period: 15,
                            brushType: 'stroke',
                            scale: 0
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                formatter: '{b}',
                                textStyle: {
                                    color: 'black',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        symbol: 'image://https://frontend-oss1.s3.ap-east-1.amazonaws.com/beta-env/super-node.svg',
                        symbolSize: 8,
                        hoverAnimation: true,
                        itemStyle: {
                            normal: {
                                areaColor: '#E0E2E6',
                                borderColor: '#ffffff'
                            },
                            emphasis: {
                                areaColor: '#E0E2E6'
                            }
                        }
                    }
                }),
            },
                {
                    name: 'map',
                    type: 'map',
                    geoIndex: 0,
                    zlevel: 2,
                    mapType: 'world',
                    data: data
                }
            ],
            visualMap: [{
                show: false,
                dimension: 0,
                left: '25%',
                itemWidth: 12,
                min,
                max,
                text: ['Low', 'High'],
                textStyle: {
                    color: '#ddd'
                },
                inRange: {
                    color: ['#69C0FF', '#1890FF']
                }
            }],
            tooltip: {
                trigger: 'item',
                textStyle: {
                    color: '#141414'
                },
                backgroundColor: '#FAFAFB',
                className: 'echarts-tooltip',
                padding: 6,
                formatter: function(params) {
                    if (params.data && params.data.name) {
                        return `<div style='font-size:12px;color: #595959;font-weight: 500;'>${params.data.name}</div>
            ${params.data && params.data.superNum ? ("<div style='font-size:12px;color: #595959;font-weight: 500;'>Super Nodes：<span style='color:#002766;font-weight: 700;'>" + params.data.superNum + "</span></div>") : ''}
            <div style='font-size:12px;color: #595959;font-weight: 500;'>Edge Nodes：<span style='color:#002766;font-weight: 700;'>${params.data.edgeNodes && params.data.edgeNodes.num}</span></div>
            <div style='font-size:12px;color: #595959;font-weight: 500;'>Backup Nodes：<span style='color:#002766;font-weight: 700;'>${params.data && params.data.value}</span></div>`
                    }
                    if (params.data && params.data.data && params.data.data.name) {
                        return `<div style='font-size:12px;color: #595959;font-weight: 500;'>${params.data.data.name}</div>
          <div style='font-size:12px;color: #595959;font-weight: 500;'>Super Nodes：<span style='color:#002766;font-weight: 700;'>${params.data.data.num}</span></div>
          `
                    }
                }
            }
        }

        // document.querySelectorAll(".super-nodes-count")[0].innerHTML = result3.length;
        // document.querySelectorAll(".edge-nodes-count")[0].innerHTML = addComma(String(edgeNodesSum));
        // document.querySelectorAll(".backup-nodes-count")[0].innerHTML = addComma(String(backupSum));
        // document.querySelectorAll(".infrastructure")[0].innerHTML = `${addComma(String(sumNodes))} nodes covering over ${sumCountries} countries`;

        myChart.setOption(option, true);
    }

    init();
</script>